<!-- <view class="hot-box1">
    <view class="hottitle1"></view>
    <view class="title1">
      <view class="cons1">#</view>
      <text class="title-input1">2024债务清零成功上岸</text>
    </view>
    <view class="title2">
      <view class="cons2">#</view>
      <text class="title-input2">资深债友经验谈
      </text>
    </view>
    <view class="title3">
      <view class="cons3"></view>
      <text class="title-input2">
      </text>
    </view>
    <view class="title4"></view>
    <view class="title5"></view>
    <view class="title6"></view>
  </view>
  <view class="hot-box2"></view> -->

.hot-box1 {
position: relative;
margin: 0 64rpx;
margin-top: 36rpx;
height: 300rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
background: #FF8066;
align-items: center;

.hottitle1 {
position: absolute;
/* 使用绝对定位 */
top: 0;
display: flex;
flex-wrap: wrap;
width: 300rpx;
height: 104rpx;
background: #e2c5c5;
font-size: 32px;
font-family: STZhongsong, STZhongsong-400;
font-weight: 400;
text-align: CENTER;
color: #b98989;
line-height: 38px;
}

.title1 {
position: absolute;
display: flex;
top: 104rpx;
width: 328rpx;
height: 58rpx;
background: #f8f8f8;
border: 1px solid;
border-image: linear-gradient(161deg, rgba(255, 254, 250, 0.76) 0%, rgba(255, 250, 254, 0.30) 100%) 1 1;
border-radius: 20px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

.cons1 {
display: flex;
justify-content: center;
align-items: center;
width: 32rpx;
height: 34rpx;
margin-top: 10rpx;
margin-left: 10rpx;
background: #000000;
border-radius: 50%;
font-weight: 400;
color: #FFD700;
/* 黄色字体颜色 */
font-size: 24px;
/* 字体大小 */
position: relative;
/* 相对定位，以便使用伪元素 */
overflow: hidden; // 隐藏超出部分
}

.title-input1 {
display: flex;
width: 244rpx;
height: 30rpx;
margin-left: 15rpx;
margin-top: 14rpx;
font-size: 12px;
font-family: DengXian, DengXian-400;
font-weight: 400;
text-align: CENTER;
color: #000000;
line-height: 28rpx;
white-space: nowrap; // 不换行
}

}

.title2 {
display: flex;
margin-top: 38px;
width: 256rpx;
height: 58rpx;
margin-left: 380rpx;
margin-right: 0;
background: #fffefe;
border: 1px solid;
border-image: linear-gradient(165deg, rgba(255, 254, 250, 0.76) 0%, rgba(255, 250, 254, 0.30) 100%) 1 1;
border-radius: 20px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

.cons2 {
display: flex;
justify-content: center;
align-items: center;
width: 32rpx;
height: 34rpx;
margin-top: 10rpx;
margin-left: 10rpx;
background: #000000;
border-radius: 50%;
font-weight: 400;
color: #FFD700;
/* 黄色字体颜色 */
font-size: 24px;
/* 字体大小 */
position: relative;
/* 相对定位，以便使用伪元素 */
overflow: hidden; // 隐藏超出部分
}

.title-input2 {
margin-left: 15rpx;
margin-top: 14rpx;
width: 168rpx;
height: 26rpx;
background: #FFD700;
font-size: 12px;
font-family: DengXian, DengXian-400;
font-weight: 400;
text-align: CENTER;
color: #000000;
line-height: 28rpx;
white-space: nowrap; // 不换行

}
}

.title3 {
position: absolute;
display: flex;
margin-top: 120rpx; // 调整垂直位置
left: 0; // 使其在左侧对齐
display: flex;
width: 328rpx;
height: 58rpx;
background: #f8f8f8;
border: 1px solid;
border-image: linear-gradient(161deg, rgba(255, 254, 250, 0.76) 0%, rgba(255, 250, 254, 0.30) 100%) 1 1;
border-radius: 20px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.title4 {
position: absolute;
top: 162rpx; // 与 title3 对齐
left: 344rpx; // 使其在 title2 的右侧
display: flex;
width: 328rpx;
height: 58rpx;
background: #f8f8f8;
border: 1px solid;
border-image: linear-gradient(161deg, rgba(255, 254, 250, 0.76) 0%, rgba(255, 250, 254, 0.30) 100%) 1 1;
border-radius: 20px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
}

.hot-box2 {
position: relative;
margin: 0 64rpx;
// margin-top: 36rpx;
margin-top: 22rpx;
height: 268rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
background: #FF8066;
align-items: center;
}